<template>
  <div style="padding: 15px">
    <el-form :inline="true" :model="form" class="demo-form-inline" :rules="rules" >
      <el-form-item label="充值时间" required>
        <el-date-picker
          v-model="value1"
          type="daterange"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="pickerChange"
          />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <vxe-table
      ref="xTable"
      border
      resizable
      align="center"
      stripe
      highlight-current-row
      highlight-hover-row
      row-id="id"
      height="300"
      :data="tableData"
      :loading="loading"
      remote-sort
      @sort-change="sortList"
    >
      <vxe-table-column field="gmtCreated" title="充值时间"/>
      <vxe-table-column field="chargeTimes" title="充值数量"/>
    </vxe-table>
    <!-- <vxe-pager
      :loading="loading"
      :current-page.sync="listQuery.pageNum"
      :page-size.sync="listQuery.pageSize"
      :total="listQuery.total"
      :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
      @page-change="handlePageChange"
    /> -->
  </div>
</template>
<script>
import request from '@/utils/request'
export default {
  name: "Detail",
  props:{
    code:String
  },
  data() {
    return {
      value1:[],
      form:{},
      rules:{},
      loading:false,
      tableData:[],
      listQuery:{}
    };
  },
  created() {
    this.getInfo()
  },
  methods: {
    // 获取页面信息
    getInfo() {
      let data = {groupCode:this.code, ...this.listQuery}
      request({
        url: `/wms/outbound/accountBalanceDetails`,
        method: 'put',
        params:data
      }).then(response => {
        this.tableData = response.data.records
      })
    },
    pickerChange(val){
      if(val){
        this.listQuery.gmtVerifyStart = val[0]+' 00:00:00'
        this.listQuery.gmtVerifyEnd = val[1]+' 23:59:59'
      }else{
        this.listQuery.gmtVerifyStart = ''
        this.listQuery.gmtVerifyEnd = ''
      }
    },
    onSubmit(){
      this.getInfo()
    },
        // 分页handle
    handlePageChange({ currentPage, pageSize }) {
      this.listQuery.pageNum = currentPage;
      this.listQuery.pageSize = pageSize;
      this.findList();
    },
        // 排序
    sortList({ column, property, order }) {
      if (order) {
        this.listQuery.sortField = property;
        this.listQuery.sortType = order;
      } else {
        this.listQuery.sortField = "";
      }
      this.findList();
    },
  }
};
</script>
<style></style>
